import React, { useEffect, useState } from 'react'
import { Button, Drawer, message } from 'antd';
// import { useState } from 'react';
import { Form, Input, Select } from 'antd';
import api from '../../../aips/menu'
import apis from '../../../aips/role'
import { Tree } from 'antd';
import { DownOutlined, UserOutlined,SettingOutlined } from '@ant-design/icons';
import { Dropdown, Space, Tooltip } from 'antd';
import menulist from '../../../aips/menu'
import ImgModai from './ImgModai';
const { Option } = Select;
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 20,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 0,
        span: 24,
    },
};

const MenuDrawer = (props) => {
    const { open, onClose, title, id } = props

    const handleButtonClick = (e) => {
        message.info('Click on left button.');
        console.log('click left button', e);
    };
    const handleMenuClick = (e) => {
        message.info('Click on menu item.');
        console.log('click', e);
    };
    const items = [
        {
            label: '展开所有',
            key: '1',
        },
        {
            label: '合并所有',
            key: '2',
        },

    ];
    const menuProps = {
        items,
        onClick: handleMenuClick,
    };
    const [treeData, setTreeData] = useState([])
    useEffect(() => {
        menu()
    }, [])

    async function menu() {
        const re = await apis.menu()
        setTreeData(re.rows.children)
    }
    const [arr, setArr] = useState({})


    const onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);

    };

    const onlinkk = (checkedKeysValue, e) => {
        console.log('onCheck', checkedKeysValue, e);
        form.setFieldsValue({
            perms: checkedKeysValue.checked.join()
        })
    }



    const [form] = Form.useForm();
    if (title == '修改菜单') {
        form.setFieldsValue({
            menuName: id.title,
            path: id.path,
            component: id.component,
            parentId: id.parentId,
            icon: id.icon,
            orderNum: id.id
        })
    } else if (title == '新增菜单') {
        form.setFieldsValue({
            menuName: '',
            path: '',
            component: '',
            parentId: '',
            icon: '',
            orderNum: '',
        })
    } else {
        form.setFieldsValue({
            menuName: '',
            parentId: '',
            perms: ''
        })
    }

    const onFinish = (values) => {
        if (title == '修改菜单') {
            values = { ...values, menuId: checkedKeys.checked.join() }
            menulist.menuList(...values).then(res => {
                // console.log(res);
                //暂无权限
            })
        } else if (title == '新增菜单') {
            menulist.addmenu({ ...values, type: '0' }).then(res => {
                if (res == undefined) {
                    message.success('新增菜单成功')
                } else {
                    message.error('新增菜单失败')
                }
            })

        } else if (title == '新增按钮') {
            menulist.addmenu({ ...values, type: '1' }).then(res => {
                if (res == undefined) {
                    message.success('新增按钮成功')
                } else {
                    message.error('新增按钮失败')
                }
            })
        }

    };
    // 图片模态库方法
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div>
            <>
            <ImgModai handleOk={handleOk} handleCancel={handleCancel} isModalOpen={isModalOpen}></ImgModai>
                <Drawer title={title} placement="right" onClose={onClose} open={open}
                    width={500}

                    footer={
                        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                            <Form.Item {...tailLayout}>
                                <Dropdown menu={menuProps} style={{ marginRight: '200px' }}>
                                    <Button>
                                        <Space>
                                            树操作
                                            <DownOutlined />
                                        </Space>
                                    </Button>
                                </Dropdown>
                                <Button htmlType="button" onClick={onClose} style={{ marginLeft: '200px', marginRight: '10px' }}>
                                    取消
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>
                    }
                >
                    {
                        title == '修改菜单' && <div>
                            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                                <Form.Item name="menuName" label="菜单名称" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="path" label="菜单URL" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="component" label="菜单地址" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="parentId" label="相关权限"  >
                                    <Input />
                                </Form.Item>
                                <Form.Item name="icon" label="菜单图标">
                                        <Input
                                        addonAfter={<SettingOutlined  onClick={showModal} />}
                                            allowClear
                                            style={{
                                                width: '100%',
                                            }}
                                            defaultValue="0571"
                                        />
                                </Form.Item>
                                <Form.Item name="orderNum" label="菜单排序">
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    name="menuId"
                                    label="上级菜单"
                                >
                                    <Tree
                                        checkable
                                        // checkStrictly
                                        defaultExpandedKeys={[]}
                                        defaultSelectedKeys={[]}
                                        defaultCheckedKeys={[]}
                                        onSelect={onSelect}
                                        onCheck={onlinkk}
                                        treeData={treeData}
                                    />
                                </Form.Item>
                            </Form>
                        </div>
                    }
                    {
                        title == '新增菜单' && <div>
                            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                                <Form.Item name="menuName" label="菜单名称" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="path" label="菜单URL" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="component" label="菜单地址" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="parentId" label="相关权限"  >
                                    <Input />
                                </Form.Item>
                                <Form.Item name="icon" label="菜单图标">
                                    <Input />
                                </Form.Item>
                                <Form.Item name="orderNum" label="菜单排序">
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    name="perms"
                                    label="上级菜单"
                                >
                                    <Tree
                                        checkable
                                        checkStrictly
                                        // defaultExpandedKeys={[]}
                                        // defaultSelectedKeys={[]}
                                        // defaultCheckedKeys={[]}
                                        onSelect={onSelect}
                                        onCheck={onlinkk}
                                        treeData={treeData}
                                    />
                                </Form.Item>
                            </Form>
                        </div>
                    }
                    {
                        title == '新增按钮' && <div>
                            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                                <Form.Item name="menuName" label="按钮名称" rules={[{ required: true, },]}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="parentId" label="相关权限"  >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    name="perms"
                                    label="上级菜单"
                                >
                                    <Tree
                                        checkable
                                        checkStrictly
                                        // defaultExpandedKeys={[]}
                                        // defaultSelectedKeys={[]}
                                        // defaultCheckedKeys={[]}
                                        onSelect={onSelect}
                                        onCheck={onlinkk}
                                        treeData={treeData}
                                    />
                                </Form.Item>
                            </Form>
                        </div>
                    }

                </Drawer>
            </>
        </div>
    )
}

export default MenuDrawer